iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
2
Modern Web

寫給工程師的 WebGL 學習心得系列 第 29

[WebGL - Day29] WebGL 的一些討論

  • 分享至 

  • xImage
  •  

先前推薦 PixiJS 的系列文,當時是推坑
這次 WebGL系列 ,希望越多人寫越好,可以討論跟交朋友
至於是否推坑,我會說 「快入坑,我想找人交流心得!」


鐵人賽寫到與看到的一些討論:

真的需要刻 WebGL 嗎?

今年 Modern Web 2019 研討會裡,
主題是 前端 3D 渲染技術的應用 的講師舉了一個例子:
3D Model

這是一張帶有 3D光源 效果的模型運算出來的圖,
有模型、有光源、旋轉時也會正確顯示模型光影,但需要思考的是...
使用者真的在意 模型的光源是否正確嗎?

為了正確的光影效果,可能提升了素材的檔案大小、
因此降低網頁的讀取速度或消耗了即時運算的效能,
開發維護 的成本也不相同


WebGL 效果的學習與開發

這系列與上次 PixiJS 系列 相比,
花了很多篇幅在討論 如何學習與開始寫 WebGL

  • 學習GLSL 的學習資源相較幾年前增加了不少,但學習還是有相當門檻
  • 開發:最終呈現的效果,是自己寫 Shader ,或是套用現成的就好 ?

WebGL 使用 JavaScript 控制 GLSL,
即使是現成的濾鏡,調整好 Shader 效果的變數後,
也可以做出許多漂亮的效果

使用現成的 Shader 時,
如果濾鏡有文件與範本會很方便

沒有文件或文件不完整的時候,
看得懂濾鏡在寫什麼好像也很不錯


開發時會遇到的一些問題

  • 除錯
    我目前會先在 Shadertoy 上盡量完成效果,
    再交由 JavaScript WebGL Library 處理
    如果是在 JavaScript 開發時出現 Shader 的語法錯誤,
    會不容易除錯

  • 沒有 圖形介面GUI,參數影響結果相當大
    寫 Shader 時沒有 圖形介面GUI,
    而 Shader 的效果又很可能一個變數沒寫好,
    就有相當大的不同

  • 思考邏輯的不同
    在看了一些 Shader 教學後,
    寫 Shader 的思考邏輯還有很多部分需要調整與學習

例:
系列後期的文章開始用了 畫圈畫圓 的效果,
也提到 數值相加遮罩 等應用方式
但這些實作,可能要先知道怎麼 畫圓畫方smoothstep() 的原理
在開發新效果時,較容想出要怎麼應用

就是另一種語言思考邏輯應用的經驗了


輸出原理與數學公式:

很多視覺效果有各自的輸出原理
如先前提到 Adobe Photoshop 中的混合模式
Photoshop Blending Mode
看完除了長知識外,也可以從描述試著練習用 Shader 實作各種混和模式
很有趣

數學公式
先前提到的水流效果:
WebGL Fluid Simulation
WebGL Fluid Simulation
說明裡有提到水流效果的參考資料
GPU Gems - Chapter 38. Fast Fluid Dynamics Simulation on the GPU
其中的一些數學公式,
約略知道有些概念實作後在其他地方會用到
在學起來成為經驗之前,同樣是相當有難度


Shader 效果的協作:

與設計師協作:
開發效果時有可能會與設計師討論,
討論的方式可能會開 UI介面 給設計玩:

同樣提到先前的水流效果:
WebGL Fluid Simulation
WebGL Fluid Simulation
有 UI介面 可以玩:
WebGL Fluid Simulation - GUI
可是...如果沒特別講怎麼玩,只有介面時
又總覺得好像碰運氣看能不能遇到很漂亮的效果

開發者需要將 UI介面 開發到什麼程度,
設計師會想要調整的是那些部分
都會是開發 WebGL 效果時要注意的部分
也就是 WebGL 效果協作時的 溝通成本 相當

與 Shader 開發者協作:
與會寫 Shader 的開發者合作 (例如 unity ),也許是另一種方法
溝通成本 也是相當高,但如果能多會一些 Shader 的特性,
或是能約略看懂 Shader 時,協作會更順利


市場

雖然不一定要用 市場 = 開發者數量 = 資源數量 的方向來討論,
但確實有各自有影響

在學習與分享 WebGL 時,我注意到的現象是:

  • 對 WebGL 效果有興趣的開發者不少
    但 WebGL 門檻高,較難實做出作品、成為心得並累積經驗
  • 資源數量有增加,但還不完全
  • 市場的話,如本文前面提到 是否真的要刻Shader
    則是目前我還在觀察的部分

不同的世界

Shader 很有趣,雖然不容易學習
目前大部分裝置已可看 WebGL 效果,
學習 Shader 後,更有機會拓展自己能做到的界線

接著就是學習與經驗累績了!


上一篇
[WebGL - Day28] Displacement Filter (3/3) 在 PixiJS 上完成互動
下一篇
[WebGL - Day30] 後記與完賽
系列文
寫給工程師的 WebGL 學習心得30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言